<template>
	<div class="my_container">
		<van-cell-group class="my-info" v-if="user">
		  <van-cell center class="base-info" :border="false">
			<template v-slot:icon>
				<van-image
					class="avatar"
					round
					fit="cover"
					slot="icon"
					:src="userLoginInfo.photo">
				</van-image>
			</template>  
			
			<template v-solt:title>
				<div slot="title" class="name">{{userLoginInfo.name}}</div>
			</template>
			
			<template v-slot:right-icon>
				<van-button 
					round 
					size="small" 
					class="update-btn"
					to="/user/profile"
					>编辑资料</van-button>
			</template>
		  </van-cell>
		<van-grid class="data-info" :border="false">
		  <van-grid-item class="data-info-item">
			  <div slot="text" class="text-wrap">
				  <div class="count">112</div>
				  <div class="text">头条</div>
			  </div>
		  </van-grid-item>
		  <van-grid-item class="data-info-item">
			  <div slot="text" class="text-wrap">
				  <div class="count">112</div>
				  <div class="text">关注</div>
			  </div>
		  </van-grid-item>
		  <van-grid-item class="data-info-item">
			  <div slot="text" class="text-wrap">
				  <div class="count">112</div>
				  <div class="text">粉丝</div>
			  </div>
		  </van-grid-item>
		  <van-grid-item class="data-info-item">
			  <div slot="text" class="text-wrap">
				  <div class="count">112</div>
				  <div class="text">获赞</div>
			  </div>
		  </van-grid-item>
		</van-grid>
		</van-cell-group>
		<div class="out_login" v-else="user">
			<div @click="$router.push({
				name:'login',
				query:{
					'redirect':'/my'
				}
			})">
				<img src="@/assets/base/no_login.png" alt="">
			</div>
			<div class="text">登陆/注册</div>
		</div>
		<van-grid :column-num="2" class="nav-grid mb-4">
		  <van-grid-item class="iconfont nav-grid-item" icon-prefix="icon" icon="shoucang" text="收藏"/>
		  <van-grid-item class="iconfont nav-grid-item" icon-prefix="icon" icon="lishi" text="历史"/>
		</van-grid>
		<van-cell title="消息通知" is-link to="/" />
		<van-cell title="小智同学" is-link to="/user/chat" class="mb-4" />
	    <van-cell title="退出登录" class="logout-cell" v-if="user" @click="logOut" />
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import {getUserInfo} from '@/api/user.js'
	export default {
		name:'my',
		data(){
			return {
				active: 0,
				userLoginInfo:{}
			}
		},
		created(){
			this._getUserInfo()
		},
		methods:{
			async _getUserInfo(){
				const {data} = await getUserInfo()
				this.userLoginInfo = data.data
			},
			logOut(){
				//提示用户是否要退出
				this.$dialog.confirm({
				  title: '退出提示',
				  message: '确认退出吗？',
				})
				  .then(() => {
				    this.$store.commit('setUser',null)
				  })
				  .catch(() => {
				    // on cancel
				  });
			}
		},
		computed:{
			...mapState(['user'])
		}
	}
</script>

<style lang="less" scoped>
	.my-info{
		background-color:#439ffa;
		.base-info{
			box-sizing:border-box;
			padding-top: 38px;
			padding-bottom: 11px;
			height:115px;
			background-color: unset;
			.avatar{
				border:1px solid #fff;
				width:66px;
				height:66px;
				margin-right: 20px;
			}
			.name{
				font-size:15px;
				color:#fff;
			}
			.update-btn{
				height:16px;
				font-size: 10px;
				color:#666;
			}
		}
		.data-info{
			.data-info-item{
				height:65px;
				color:#fff;
				.text-wrap{
					display:flex;
					flex-direction: column;
					justify-content:center;
					align-items:center;
					.count{
						font-size: 18px;
					}
					.text{
						font-size: 11px;
					}
				}
			}
			
			/deep/ .van-grid-item__content {
			      background-color: unset;
			}
		}
		
	}
	/deep/.nav-grid{
	    .nav-grid-item{
			 height:70px;
			  .icon-shoucang{
				 font-size: 22px;
				 color:#eb5253;
			 }
			  .icon-lishi{
			 	font-size: 22px;
			 	color:#ff9d1d;
			 }
			 .van-grid-item__text{
				 font-size: 14px;
				 color: #333;
			 }
		}
	}
	.logout-cell{
		text-align:center;
		color:#d86262;
	}
	.out_login{
		height:180px;
		background-color: #439ffa;
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		img{
			width:66px;
			height:66px;
		}
		.text{
			font-size: 14px;
			color:#fff;
		}
	}
	.mb-4{
		margin-top: 4px;
	}
</style>